<template>
  <div>
    <el-button type="primary" size="small" v-if="!shop.name" @click="shopApply">
      申请店铺
    </el-button>
    <el-descriptions class="head" :column="1" border v-if="shop.name">
      <template slot="extra">
        <el-button type="primary" size="small"  @click="shopChange">
          修改店铺
        </el-button>
        <el-button type="primary" size="small"  @click="shopDelete">
          注销店铺
        </el-button>
      </template>
      <el-descriptions-item v-model="shop.name">
        <template slot="label">
          <i class="el-icon-notebook-1"></i>
          店铺名称
        </template>
        {{shop.name}}
      </el-descriptions-item>
      <el-descriptions-item v-model="shop.info">
        <template slot="label">
          <i class="el-icon-info"></i>
          店铺介绍
        </template>
        {{shop.info}}
      </el-descriptions-item>
    </el-descriptions>
    <el-table
      stripe
      border
      :data="shopGoods"
      style="width: 100%"
      v-if="shop.name"
      ref = 'shopGoodsTable'
      @selection-change="handlerSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="kind"
        label="商品种类">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称">
      </el-table-column>
      <el-table-column
        prop="iprice"
        label="进货价格">
      </el-table-column>
      <el-table-column
        prop="oprice"
        label="售卖价格">
      </el-table-column>
      <el-table-column label="商品图片" width="180px">
        <template v-slot="scope">
          <img :src="scope.row.pic" alt="" style="width: 100px;height: 100px">
        </template>
      </el-table-column>
      <el-table-column
        prop="storage"
        label="库存情况">
      </el-table-column>
      <el-table-column
        prop="edate"
        label="借卖到期时间"
        width="150">
      </el-table-column>
      <el-table-column
        prop="options"
        fixed="right"
        width="150px"
        label="操作"
      >
        <template v-slot="scope">
          <el-button
            type="primary"
            size="mini"
            @click="deleteGoods(scope.$index, scope.row)">
            退货
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="change(scope.$index, scope.row)">
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div v-if="shop.name" class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="pageParams.total">
      </el-pagination>
    </div>
    <el-button size="small" style="margin-top: 10px"
               type="primary"
               @click = "deleteMany"
               v-if="shop.name"
               :disabled="this.selectItems.length==0">
      批量退货
    </el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form  :rules="rules" ref="shopForm" label-width="80px" :model="shopForm">
        <el-form-item label="店铺名称" prop="name">
          <el-input type="text" v-model="shop.name"></el-input>
        </el-form-item>
        <el-form-item label="店铺描述" prop="position">
          <el-input type="textarea" v-model="shop.info"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <!-- 设置触发更新的方法 -->
          <el-button type="primary" @click="submit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "shop",
  mounted() {
  },
  data(){
    return{
      //user: JSON.parse(window.sessionStorage.getItem("user"))
      shop:{
        name:'123',
        info:'123',
      },
      shopForm:{
        name:'',
        info:''
      },
      shopGoods: [{
        number:'1',
        kind:'生鲜',
        name:'龙虾',
        storage:'170',
        iprice:60,
        oprice:66,
        info:'',
        pic:'https://img2.baidu.com/it/u=3367123154,2156293557&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
        edate:'2022-5-1'
      },{
        number:'2',
        kind:'生鲜',
        name:'龙虾',
        storage:'180',
        iprice:60,
        oprice:66,
        info:'',
        pic:'https://img2.baidu.com/it/u=3367123154,2156293557&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
        edate:'2022-5-1'
      },
        {
          number:'3',
          kind:'生鲜',
          name:'龙虾',
          storage:'200',
          iprice:60,
          oprice:66,
          info:'',
          pic:'https://img2.baidu.com/it/u=3367123154,2156293557&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
          edate:'2022-5-1'
        }],
      selectItems:[],
      dialogFormVisible:false,
      dialogTitle:'申请店铺',
      pageParams: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      rules:{
        name:[{
          required:true,message:'请输入店铺名称',trigger:'blur'
        }],
        info:[{
          required:true,message:'请选择店铺信息',trigger:'blur'
        }]
      }
    }
  },
  methods:
    {
      initShop(){
        this.getRequest('/获取店铺信息',user.id).then(res=>{
          if(res)
          {
            //this.warehouse = res
          }
        })
      },
      initShopData(){
        this.getRequest('/获取店铺商品信息',user.id).then(res=>{
          if(res)
          {
            //this.wareData = res
          }
        })
      },
      filterTag(value, row) {
        return row.status === value;
      },
      shopApply(){
        this.dialogFormVisible = true;
      },
      shopChange(){
        this.dialogTitle='修改店铺信息';
        this.dialogFormVisible=true;
      },
      submit() {
        this.$refs.shopForm.validate((valid) => {
          if (valid) {
            let data = {
              userid:'',
              warehouse:'this.applyForm'
            }
            /*this.postRequest('/申请一个仓库',data).then((res)=>{
               if(res){}
            })*/
            this.shop.name = this.shopForm.name;
            this.shop.info = this.shopForm.info;
            this.dialogFormVisible = false;
            this.$message({
              message: '变动成功!',
              type: 'success'
            })
          } else {
            return false;
          }
        });
      },
      shopDelete(){
        this.$confirm('此操作将永久注销店铺, 是否执行?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //发送注销仓库请求,传递用户id，仓库id
          let data = {
            userid:'user.id',
            wareid:'warehouse.id'}
          /*this.putRequest('/仓库商品上架请求',data).then(res=>{
          if(res)
          { }
        })
          * */
          this.shop={};
          this.$message({
            type: 'success',
            message: '注销成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消注销'
          });
        });
      },

      handlerSelectionChange(val){
        this.selectItems = val;
        console.log(val);
      },
      deleteGoods(index, row) {
        this.$confirm('确认退货?', '退货操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.shopGoods.splice(index,1);
        })
      },
      deleteMany()
      {
        this.$confirm('确认批量退货?', '批量退货操作', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          let ids='?';
          this.selectItems.forEach(item=>{
            ids+='ids='+item.number+'&';
          })
          let data = {
            userid:'user.id',
            wareid:'warehouse.id',
          }
          /*this.putRequest('/仓库商品上架请求',data,ids).then(res=>{
          if(res)
          {
              row.status = '已上架';
              this.$message({
              type: 'success',
              message: '上架成功!'
          }
        })
          * */
          this.selectItems.forEach(item=>{
            this.shopGoods.splice(item.index,1);
          })
            this.$message({
              type: 'success',
              message: '批量退货成功!'
            });
          //每次选择后清空
          this.$refs.shopGoodsTable.clearSelection();
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消批量上架'
          });
        });
      },
      change(index,row){
        this.$prompt('请输入售卖价格', '修改售卖价格', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
          inputErrorMessage: '格式不正确'
        }).then(({ value }) => {
          row.oprice = value;
          this.$message({
            type: 'success',
            message: '修改成功'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      handleSizeChange(val) {
        this.pageParams.pageNum = 1;
        this.pageParams.pageSize = val;
      },

      handleCurrentChange(val) {
        this.pageParams.pageNum = val;
      }
    }
}
</script>

<style scoped>
.head{
  padding: 15px;
}
</style>
